<template>

    <div class="sideOption" :style="{
        width: width
    }">

        <h3>{{ sideTitle }}</h3>



        <div class="sideOption_ul">
            <ul style="padding-left:0px ;">
                <li v-for="item in items " :key="item.id" :index="item.id" style="  display: flex; justify-content: space-between;"
                    :class="currentIndex == item.id ? 'li_select' : 'li_noSelect'" @click="select(item)">
                    <div style="overflow: hidden; width: 120px;"> 
                    <!-- {{ item.roleName }} -->
                <el-tooltip style="overflow: hidden; width: 20px;" :content=" item.roleName "  popper-class="tooltip-width">
                  {{ item.roleName }}
                </el-tooltip>
            </div>

                    <div class="itemButton" v-if="isChange">
                        <el-icon @click.stop="emit('editItem',item)">
                            <EditPen />
                        </el-icon>
                        <el-icon @click.stop="emit('deleteItem',item)">
                            <Delete />
                        </el-icon>
                    </div>

                </li>
            </ul>
        </div>

    </div>


</template>

<script setup>
import { number } from 'echarts';
import { onMounted, ref, watch } from 'vue';



/**
 * items li列表 
 * 对象格式
 * { 
 *      //     id: "1",
 *      //     label: '研究生'
 * }
 * 
 * width: 列表宽度
 * 
 * sideTitle : title
 */
const props = defineProps({
    isChange: {
        type: Boolean,
        default: false
    },
    currentIndex: {
        type: String,
        default: ""
    },
    items: {
        type: Array,
        default: [
            // {
            //     id: "1",
            //     label: '研究生'
            // },
        ]
    },
    width: {
        type: String,
        default: "150px"
    },
    sideTitle: {
        type: String,
        default: ""
    }
})




// 当前选择index
// let currentIndex = ref("1")

const emit = defineEmits(['hanldeSelect','editItem','deleteItem'])

//  li 点击事件
const select = (item) => {
    // 暴露外部事件
    emit("hanldeSelect", item.id, item, props.items)
}


defineExpose({

})

</script>
<style lang="css"> 
.tooltip-width{
  width: 300px;
}
</style>

<style scoped lang="scss">
.itemButton {
    float: right;
    margin-right: 5px;
    line-height: 32px;

    .el-icon {
        margin-right: 10px;
    }

    .el-icon:hover {
        color: #ff8f33;
    }
}

.li_select {
width: 180px;
height: 30px;

    background-color: #ff8f33;
    color: rgb(255, 255, 255);
}

.li_select:hover {
    width: 180px;
height: 30px;
    background-color: #fa8220;
    color: rgb(255, 255, 255);
}
.li_noSelect{
    width: 180px;
height: 30px;
}
.li_noSelect:hover {
    background-color: #40a0ff19;
    width: 180px;
height: 30px;

    background-color: #ff8f33;
    color: rgb(255, 255, 255);
}

.sideOption_ul {

    margin-top: 10px;


    li {
        list-style: none;
        line-height: 16px;
        font-size: 16px;
        line-height: 28px;
        font-size: 14px;
        cursor: pointer;
        margin: 5px;
        border-radius: 5px;
    }

    // li:hover {
    //     background-color: #40a0ff19;
    // }

    // li:active {
    //     background-color: #409eff;
    //     color: rgb(255, 255, 255);
    // }

}

.sideOption {
    text-align: center;

}

.el-menu-vertical-demo {
    margin-top: 10px;
}
</style>